<template>
	<view :style="{ '--color': color }">
		<status-bar title="服务商申请"></status-bar>
		<view class="Wrapper">
			<view class="Postion">
				<view
					class="size30 color m-right30 regonTitle"
					v-for="(item, index) in title"
					:key="index"
					@click="changSelet(item)"
					>{{ item.name }}</view
				>
			</view>
			<view class="list" v-for="(item, index) in pageData" :key="index">
				<view class="info">
					<text class="Name">{{ item.RegionName }}</text>
					<view class="color ellipsis size28" v-if="item.agentCount > 0"
						>省级代理已占用</view
					>
					<view class="ellipsis size28" v-else>
						<text class="color_16d size28 m-right20">{{ reubnCin }}级代理可用</text>
						<text class="color size28" @click="ApplyFor(item)">立即申请</text>
					</view>
				</view>
				<text class="color size28" @click.stop="lookSub(item)" v-if="type < 3"
					>查看下级</text
				>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				regioncode: 0, // 0 为获取 省/自治区/直辖市/特别行政区
				type: 1, // 1省  2市   3区  4街道
				pageData: [],
				province: '',
				city: '',
				area: '',
				title: [],
			};
		},
		onLoad() {
			this.Division();
		},
		methods: {
			Division() {
				this.$http
					.post({
						url: '/singleSaleApi/getAdministrativeDivision',
						data: {
							regioncode: this.regioncode,
							type: this.type,
						},
					})
					.then((res) => {
						if (res.code != 200) return this.$Toast(res.msg);
						const result = res.data || [];
						this.title = res.title;
						this.pageData = result;
					});
			},
			lookSub(item) {
				if (this.type == 1) this.province = item.RegionName;
				this.regioncode = item.RegionCode;
				this.type++;
				this.Division();
			},
			async ApplyFor(item) {
				const Flag = await this.$Modal('提示', `确定申请${item.RegionName}吗？`);
				if (!Flag) return;

				this.$http
					.post({
						url: '/userAgentApi/editAgent',
						data: {
							Division1: item.Division1 || '',
							Division2: item.Division2 || '',
							Division3: item.Division3 || '',
							Division4: item.Division4 || '',
						},
					})
					.then((res) => {
						if (res.code != 100) return this.$Toast(res.msg);
						this.$Toast(res.msg);
						this.Division();
					});
			},

			changSelet(item) {
				this.type = item.type;
				this.regioncode = item.code;
				this.Division();
			},
		},
		computed: {
			...mapState(['color']),
			reubnCin() {
				const Obj = {
					1: '省',
					2: '市',
					3: '区',
				};
				return Obj[this.type];
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: $page;
		padding-bottom: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.Wrapper {
		width: 690rpx;
		margin: 24rpx auto 0;
		.Postion {
			color: var(--color);
			font-size: 30rpx;
			display: flex;
			align-items: center;
			.regonTitle {
				position: relative;
			}
			.regonTitle::before {
				content: '>';
				position: absolute;
				right: -22rpx;
				top: 50%;
				transform: translateY(-50%);
				color: #999;
				font-size: 24rpx;
			}
			.regonTitle:last-child::before {
				display: none;
			}
		}
		.list {
			width: 100%;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.info {
				flex: 1;
				display: flex;
				align-items: center;
				.Name {
					max-width: 150rpx;
					color: #000;
					font-size: 30rpx;
					flex-shrink: 0;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
